<template>
  <div class="lists">
    <div class="content">
      <div class="list">
        <div class="item" @click="showWebgl('/Threes-Cube')">
          <img src="../../assets/logo.png">
          <div class="description">
            会旋转的立方体
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="showWebgl('/Threes-WebglPoints')">
          <img src="../../assets/logo.png">
          <div class="description">
            Threejs传递参数给Webgl
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="showWebgl('/Threes-WebglPoints2')">
          <img src="../../assets/logo.png">
          <div class="description">
            粒子效果1
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="showWebgl('/Threes-WebglPoints3')">
          <img src="../../assets/logo.png">
          <div class="description">
            粒子效果2
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="shendanShu">
          <img src="../../assets/logo.png">
          <div class="description">
            圣诞树
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="showWebgl('/Threes-SvgRenderer')">
          <img src="../../assets/logo.png">
          <div class="description">
            svg
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main.vue",
  methods: {
    shendanShu() {
      window.open('http://119.91.147.251:8081/')
    },
    showWebgl(path) {
      this.$router.push(path);
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.lists {
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    .list {
      width: 50%;
      margin: 1rem 0rem;
      .description {
        font-size: 1.5rem;
      }
      .item {
        padding: 1rem;
        text-align: center;
        box-shadow: -10px 0 10px #F5F5F5, /*左边阴影*/ 10px 0 10px #F5F5F5, /*右边阴影*/
          0 -10px 10px #F5F5F5, /*顶部阴影*/ 0 10px 10px #F5F5F5;

        &:hover {
          cursor: pointer;
          box-shadow: -10px 0 10px #D3D3D3, /*左边阴影*/ 10px 0 10px #D3D3D3, /*右边阴影*/
            0 -10px 10px #D3D3D3, /*顶部阴影*/ 0 10px 10px #D3D3D3;
        }
      }
    }
  }
}
</style>
